<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" th:href="|https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css|"/>
    <script th:src="|https://code.jquery.com/jquery-1.12.4.min.js|"></script>
    <script th:src="|https://code.jquery.com/ui/1.11.4/jquery-ui.min.js|"></script>
    <script th:src="|https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js|"></script>
    <script th:src="|https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js|"></script>
    <script src="../public/js/message.js" th:src="@{/js/message.js}"></script>

    <link rel="stylesheet" href="../public/css/styles.css" th:href="@{/css/styles.css}" />
    <link rel="icon" href="../public/images/favicon.ico" th:href="@{/images/favicon.ico}" />

    <title>AWS Photo Analyzer</title>

    <script>
        function myFunction() {
            alert("The form was submitted");
        }
    </script>

</head>

<body>
<header th:replace="layout :: site-header"/>

<div class="container">

    <h2>AWS Video Analyzer Sample Application</h2>
    <p>You can generate a report that analyzes a video in an Amazon S3 bucket. You can send the report to the following email address. </p>
    <label for="email">Email address:</label><br>
    <input type="text" id="email" name="email" value=""><br>

    <div>
        <br>

        <p>Click the following button to analyze the video and obtain a report</p>
        <button id="button" onclick="ProcessImages()">Analyze Video</button>
    </div>
    <div id="spinner">
        <p>Report is being generated:</p>
        <div class="spinner-border"></div>

    </div>
</div>
</body>
</html>
